<template>
  <view class="page">
    <checkbox-group @change="checkboxChange">
      <label class="uni-list-cell" v-for="(item, index) in items" :key="index">
        <view>
          <checkbox :value="item.value" :checked="item.checked"></checkbox>
        </view>
        <view>{{item.name}}</view>
      </label>
    </checkbox-group>
    <button type="button" @click="submit()">提交</button>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        items: [{
            value: 'USA',
            name: '美国'
          },
          {
            value: 'CHN',
            name: '中国',
            checked: 'true'
          },
          {
            value: 'BRA',
            name: '巴西'
          },
          {
            value: 'JPN',
            name: '日本'
          },
          {
            value: 'ENG',
            name: '英国'
          },
          {
            value: 'FRA',
            name: '法国'
          }
        ]
      };
    },
    methods: {
      checkboxChange: function(e) {
        var items = this.items,
          values = e.detail.value;
        for (var i = 0; i < items.length; ++i) {
          if (values.includes(items[i].value)) {
            this.items[i].checked = true;
            this.$set(this.items, i, this.items[i]);
          } else {
            this.items[i].checked = false;
            this.$set(this.items, i, this.items[i])
          }
        }
      },
      submit() {
        let newItems = [];
        for (let i = 0; i < this.items.length; i++) {
          if (this.items[i].checked) {
            newItems.push(this.items[i]);
          }
        }
        console.log(JSON.stringify(newItems));
      }
    }
  }
</script>

<style lang="scss">
  .page {
    width: 100%;
    height: 100vh;
  }

  .uni-list-cell {
    display: flex;
  }
</style>